<template>
  <el-dialog v-model="visible" title="属性导入" width="30%" :modal="true" :close-on-click-modal="false">
    <el-upload
      :action="uploadUrl"
      :headers="uploadHeader"
      name="uploadedFile"
      v-model:file-list="fileList"
      accept=".json"
      ref="uploadFile"
      :limit="1"
      :auto-upload="false"
      :on-exceed="handleExceed"
      :data="uploadData"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUploadUpload"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <template #tip>
        <div class="el-upload__tip text-red">
          仅支持上传一个PDManer设计文件
        </div>
      </template>
    </el-upload>
    <el-row :gutter="8">
      <el-col :span="18">
        <span>表代码：</span>
        <el-input v-model="targetTableCode" style="width: 220px" placeholder="请输入需要导入属性的表代码" />
      </el-col>
      <el-col :span="4">
        <el-button type="success" @click="handleSubmit">上传</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { genFileId } from 'element-plus';
import { getToken } from '@/utils/auth'

export default defineComponent({
  name: 'PropUpload',
  emits: ['reload'],
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();

    const vueData = reactive({
      uploadUrl:  `${import.meta.env.VITE_APP_BASE_API}/module/prop/upload`,
      visible: false,
      targetTableCode: '',
      modelCode: '',
      fileList: [],
      uploadData:{},
      uploadHeader:{ 'Authorization': 'Bearer ' + getToken() },
    });

    function show(modelCode) {
      vueData.visible = true;
      vueData.modelCode = modelCode;
      vueData.fileList = [];
      vueData.targetTableCode = '';
    }

    // 当超出限制时，执行的函数
    function handleExceed(files) {
      proxy.$refs['uploadFile'].clearFiles()
      const file = files[0];
      file.uid = genFileId()
      proxy.$refs['uploadFile'].handleStart(file);
    }

    function handleSubmit() {
      if (vueData.fileList == null || vueData.fileList.length === 0) {
        proxy.$modal.msgWarning('请选择文件');
        return;
      }
      if (vueData.targetTableCode == null || vueData.targetTableCode === '') {
        proxy.$modal.msgWarning('请填写表代码');
        return;
      }
      vueData.uploadData = {
        modelCode: vueData.modelCode,
        targetTableCode: vueData.targetTableCode,
      };
      proxy.$refs['uploadFile'].submit();
    }

    function beforeUploadUpload(rawFile) {
      if (rawFile.type !== 'application/json') {
        proxy.$modal.msgWarning('必须上传设计的JSON文件');
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        proxy.$modal.msgWarning('上传的设计JSON文件不允许超过2MB');
        return false
      }
      return true
    }

    function handleUploadSuccess() {
      proxy.$modal.msgSuccess("上传成功");
      vueData.visible = false;
      emit('reload');
    }

    return {
      ...toRefs(vueData),
      handleExceed,
      handleSubmit,
      beforeUploadUpload,
      handleUploadSuccess,
      show,
    };
  }
});
</script>

<style scoped>

</style>